<template>
  <v-charts v-if="renderChart" :option="options" :autoresize="autoresize" :style="{ width, height }" />
</template>

<script setup>
import VCharts from "vue-echarts";
import useSettingsStore from "@/store/modules/settings";

const settingsStore = useSettingsStore();
const props = defineProps({
  options: {
    type: Object,
    default() {
      return {};
    }
  },
  autoresize: {
    type: Boolean,
    default: true
  },
  width: {
    type: String,
    default: "100%"
  },
  height: {
    type: String,
    default: "100%"
  }
});

computed(() => {
  return settingsStore.sideTheme === "dark" ? "dark" : "auto";
});

const renderChart = ref(false);

nextTick(() => {
  renderChart.value = true;
});
</script>
